<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>辞辞辞的有声相册</title>
    <style>
         body{
        text-align: center;
        background-color: bisque;
    }
    .container {
  display: flex;
  justify-content: center;
  width: 100%; 
} 
   img{
    margin: 0 auto;
    background-size: contain;
}

.code-preview {
    position: relative;
    display: inline-block;
    font-size: 22px;
    color: rgb(217, 10, 245);
  }

  .code-preview .code {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 5px;
    z-index: 1000;
  }

  .code-preview:hover .code {
    display: block;
  }
    </style>
</head>
<body>
    <!-- 头部 注释  Ctrl+/ -->
   <div>
    <h1>辞辞辞的有声相册</h1>
    <hr>
    </div>

    <div class="code-preview">
        <pre>关键代码</pre>
        <div class="code">
          &lt;<pre>
             &ltstyle>
         body{
        text-align: center;
        background-color: bisque;
    }
    .container {
  display: flex;
  justify-content: center;
  width: 100%; 
} 
   img{
    margin: 0 auto;
    background-size: contain;
}

.code-preview {
    position: relative;
    display: inline-block;
    font-size: 48px;
  }

  .code-preview .code {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 5px;
    z-index: 1000;
  }

  .code-preview:hover .code {
    display: block;
  }
    &lt/style>
&lt/head>
&ltbody>
    &lt!-- 头部 注释  Ctrl+/ -->
   &ltdiv>
    &lth1>辞辞辞的有声相册&lt/h1>
    &lthr>
    &lt/div>

    &ltdiv class="code-preview">
        &ltpre>关键代码&lt/pre>
        &ltdiv class="code">
          &lt;&ltpre>关键代码&lt/pre>&gt;
        &lt/div>
      &lt/div>

   &lt!-- 主体 -->
   &ltdiv>
    &ltdiv>
        &lth2>美女&lt/h2>
        &lta href="./紫罗兰详情.html">&ltimg src="./紫罗兰.jpg" alt="">&lt/a>
    &lt/div>
    &ltdiv>
        &lth2>帅哥&lt/h2>
        &lta href="./胡歌详情.html">&ltimg src="./偶像.jpg" alt="">&lt/a>
    &lt/div>
    &ltdiv>
        &lth2>律师&lt/h2>
        &lta href="./罗翔详情.html">&ltimg src="./张三.jpg" alt="">&lt/a>
        &lta href="./罗翔详情.html">&ltimg src="./法外狂徒.jpg" alt="">&lt/a>
    &lt/div>
    &ltdiv>
        &lth2>军人&lt/h2>
        &lta href="./叶挺.html">&ltimg src="./敬礼.jpg" alt="">&lt/a>
    &lt/div>

   &lt/div>
   &lt!-- 尾部 -->
   &ltdiv>
    &ltp>&copy版权所有，顺职院，辞辞辞&lt/p>
   &lt/div> 
          &lt/pre>&gt;
        </div>
      </div>

   <!-- 主体 -->
   <div>
    <div>
        <h2>美女</h2>
        <a href="./紫罗兰详情.html"><img src="./紫罗兰.jpg" alt=""></a>
    </div>
    <div>
        <h2>帅哥</h2>
        <a href="./胡歌详情.html"><img src="./偶像.jpg" alt=""></a>
    </div>
    <div>
        <h2>律师</h2>
        <a href="./罗翔详情.html"><img src="./张三.jpg" alt=""></a>
        <a href="./罗翔详情.html"><img src="./法外狂徒.jpg" alt=""></a>
    </div>
    <div>
        <h2>军人</h2>
        <a href="./叶挺.html"><img src="./敬礼.jpg" alt=""></a>
    </div>

   </div>
   <!-- 尾部 -->
   <div>
    <p>&copy版权所有，顺职院，辞辞辞</p>
   </div> 
</body>
</html>